<template>
    <div class="titleClass" :isStuManage='isStuManage'>
        <el-row type="flex" justify="start" class="code-row-bg">
            <el-col v-if="searchData.length > 0">
                <el-form ref="searchFormData" :model="searchFormData" :label-width="labelWidth" @submit.native.prevent @keydown.enter.native="handleRef" inline>
                    <template v-for="(item,index) in searchData">
                        <!-- 输入框 -->
                        <el-form-item :key="index" :label='searchData[index].name' v-if="item.type === 'input'" class="center_line" >
                            <el-input v-model="searchFormData[item.key]" :placeholder="searchData[index].placeholder" clearable size="small" :disabled='searchData[index].isDisabled'/>
                        </el-form-item>
                        <!-- 数字输入框 -->
                        <el-form-item :key="index" :label='searchData[index].name' v-if="item.type === 'inputNumber'" class="center_line">
                            <el-input-number :min='1' size="medium" v-model="searchFormData[item.key]" :placeholder="searchData[index].placeholder" clearable></el-input-number>
                        </el-form-item>
                        <!-- 下拉选择框 -->
                        <el-form-item :key="index" :label='searchData[index].name' v-if="item.type === 'select'">
                            <el-select v-model="searchFormData[item.key]" clearable size="small" @change="e => handleSelectChange(e,item.key)" :filterable="item.filterable" :multiple="item.multiple" style="min-width: 150px;" :placeholder="searchData[index].placeholder">
                                <el-option v-for="items in item.selectData" :key="items.value" :label="items.label" :value="items.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <!-- 级联选择框 -->
                        <el-form-item :key="index" :label='searchData[index].name' v-if="item.type === 'cascader01'" >
                            <el-cascader
                                placeholder="试试搜索："
                                v-model="searchFormData[item.key]"
                                :options="cascaderData01"
                                :props="cascaderProps"
                                filterable
                                clearable size="small"
                                @change="e => handleCascaderChange(e,item.key)"
                            >
                            </el-cascader>
                        </el-form-item>
                        <el-form-item :key="index" :label='searchData[index].name' v-if="item.type === 'cascader02'" >
                            <el-cascader
                                placeholder="试试搜索："
                                v-model="searchFormData[item.key]"
                                :options="cascaderData02"
                                :props="cascaderProps"
                                filterable
                                clearable size="small"
                                @change="e => handleCascaderChange(e,item.key)"
                            >
                            </el-cascader>
                        </el-form-item>
                        <el-form-item :key="index" :label='searchData[index].name' v-if="item.type === 'cascader03'" >
                            <el-cascader
                                placeholder="试试搜索："
                                v-model="searchFormData[item.key]"
                                :options="cascaderData03"
                                :props="cascaderPropsLabel"
                                filterable
                                clearable size="small"
                                @change="e => handleCascaderChange(e,item.key)"
                            >
                            </el-cascader>
                        </el-form-item>
                        <!-- 可以选择任意一级 -->
                        <!-- <el-form-item :key="index" :label='searchData[index].name' v-if="item.type === 'cascader04'" >
                            <el-cascader
                                placeholder="试试搜索："
                                v-model="searchFormData[item.key]"
                                :options="cascaderData04"
                                :props="{ checkStrictly: true, value: 'id', label: 'name',children: 'children' }"
                                filterable
                                clearable size="small"
                                @change="e => handleCascaderChange(e,item.key)"
                            >
                            </el-cascader>
                        </el-form-item> -->
                        <!-- 日期 -->
                        <el-form-item :key="index" :label='searchData[index].name' v-if="item.type === 'pickerRange'">
                            <el-date-picker 
                                v-model="searchFormData[item.key]" 
                                size="small"
                                style="min-width: 240px;" 
                                :format="searchData[index].format"
                                :type="searchData[index].pickerType || 'daterange'" 
                                range-separator="-"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :default-time="['00:00:00', '23:59:59']"
                                :picker-options="searchData[index].pickerRangeOptions"
                                @change="dateChange"
                                clearable 
                            ></el-date-picker>
                        </el-form-item>
                    </template>
                </el-form>
            </el-col>
            <!-- <el-col style="margin-left: 15px;">
                <slot></slot>
            </el-col> --> 
        </el-row>

        <div :style="`margin-left: ${ labelWidth }px;`" >
            <el-button icon="el-icon-search" size="mini" type="primary" @click="handleRef">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" style="margin-left: 10px;" @click="handleRefReset">重置</el-button>
            <slot name="excel"></slot>
                <el-tooltip v-if="isExprot" content="根据搜索条件导出的哦" placement="right">
                    <el-button :loading="exprotLoading" style="margin-left: 10px;" @click="handleExprot">导出订单</el-button>
                </el-tooltip>
            <slot name="other"></slot>
        </div>
        
    </div>
</template>

<script>
import { transformDateFormat } from '@/utils/ruoyi.js';
export default {
    name: 'headSearch',
    props: {
        // 级联选择框数据
        cascaderData01:{
            type: Array,
            default: [],
        },
        // 级联选择框数据
        cascaderData02:{
            type: Array,
            default: [],
        },
        // 级联选择框数据
        cascaderData03:{
            type: Array,
            default: null,
        },
        cascaderData04:{
            type: Array,
            default: null,
        },
        // 渲染搜索项数据
        searchData: {
            type: Array,
            default: [],
        },
        // 时间禁用配置
        // optionsPicker: {
        //     type: Object,
        //     default: {}
        // },
        // 搜索框的默认值
        // searchDataDad: {
        //     type: Object,
        //     default: {},
        // },
        // label 的宽度
        labelWidth: {
            type: String,
            default: 70,
        },
        // 是否有导出按钮
        isExprot: {
            type: Boolean,
            default: false
        },
        // 导出接口url
        isExprotUrl: {
            type: String,
            default: ''
        },
        isStuManage: {
            type: Boolean,
            default: false
        },
        exprotData: {
            type: Array,
            default: null,
        },
        pickerRangeOptions:{
            type: Object,
            default: null,
        },
    },
    data() {
        return {
            //显示位置信息S
            cascaderProps: {
                value: "id",
                label: "name",
                children: "children",
                checkStrictly: true 
            },
            cascaderPropsLabel: {
                value: "id",
                label: "label",
                children: "children"
            },
            pickerType: 1,
            pickerTypeData: [
                { value: 1, label: '时间搜索' },
                { value: 2, label: '自然月搜索' },
            ],

            copkSearc: {},
            searchFormData: {},
            exprotLoading: false,
        }
    },
    methods:{
        
        // 导出事件
        async handleExprot(){
            let querySearch = JSON.parse(JSON.stringify(this.searchFormData));
            if(querySearch['time'].length > 0){
                querySearch.startTime = transformDateFormat(querySearch['time'][0]);
                querySearch.endTime = transformDateFormat(querySearch['time'][1]);
            }else{
                querySearch.startTime = '';
                querySearch.endTime = '';
            };
            delete querySearch.time;
            this.exprotLoading = true;
            let result = await this.downloadFileRequest(this.isExprotUrl, querySearch, true);
            this.exprotLoading = false;
            this.$emit('handleExprot',result,querySearch);
        },
        // 搜索事件
        handleRef(){
            this.$emit('handleSearchChild',this.searchFormData,'search');
        },
        // 重置事件
        handleRefReset(){
            this.searchFormData = JSON.parse(JSON.stringify(this.copkSearc));
            if(this.isStuManage){
                this.searchFormData.validState = 1
            }
            this.$emit('handleSearchChild',this.searchFormData, 'reset');
        },
        // 日期改变
        dateChange(){
            this.$emit('dateChange',this.searchFormData)
        },
        // Select 变化事件
        handleSelectChange(e,type){
            this.$emit('handleSelectChange', { id: e, type });
        },
        // 级联选择 change事件
        handleCascaderChange(e,type){
            this.$emit('handleCascaderChange', { id: e, type });
        },
    },
    mounted(){
        this.searchData.forEach(el => {
            if(el.type === 'picker' || el.multiple){
                this.copkSearc[el.key] = [];
            }else{
                this.copkSearc[el.key] = '';
            };
            if(el.pickerType == 'month'){
                this.copkSearc[el.key] = '';
            };
            // 处理搜索条件来自请求时
            if(el.type === 'select' && el.getDataUrl){
                const { value, label } = el.getKeysValue;
                switch(el.getType){
                    case 'get': 
                        ( async () => {
                            const getResult = await this.getRequest(el.getDataUrl, el.getDataParmse || {}, true);
                            if (getResult.success) {
                                el.selectData = getResult.result.map(res => {
                                    return {
                                        value: res[value],
                                        label: res[label]
                                    }
                                });
                            };
                        })()
                    break;
                    case 'post': 
                        ( async () => {
                            const postResult = await this.postRequest(el.getDataUrl, el.getDataParmse || {}, true);
                            if (postResult.success) {
                                el.selectData = postResult.result.map(res => {
                                    return {
                                        value: res[value],
                                        label: res[label]
                                    }
                                });
                            };
                        })() 
                    break;
                }
            }
        })
        this.searchFormData = JSON.parse(JSON.stringify(this.copkSearc));
    },
}
</script>

<style scoped>
.titleClass{
    /* background: #f2f2f2; */
    padding: 20px;
    padding-top: 0;
    margin-bottom: 15px;
}
.el-form--inline .el-form-item{
    margin-right: 30px;
}
</style>